<template>
  <page-header-wrapper>
    <div class="page-header-content">
      <div class="avatar">
        <a-avatar class="myAvatar" src="../../imgs/下载.jpg" />
      </div>
      <div class="content">
        <div class="content-title">
          <p class="welcome">
            {{ greeting }}, {{ name }}, {{ welcomeMessage }}
          </p>
        </div>
        <div class="department">
          前端工程师 | 蚂蚁金服 - 某某某事业群 - VUE平台
        </div>
      </div>
    </div>

    <div>
      <a-row :gutter="24">
        <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card
            class="project-list"
            :loading="loading"
            style="margin-bottom: 24px"
            :bordered="false"
            title="进行中的项目"
            :body-style="{ padding: 0 }"
          >
            <a slot="extra" class="allProject">全部项目</a>
            <div class="grid-container">
              <a-card-grid class="project-card-grid">
                <div style="margin-bottom: 8px">
                  <a-avatar class="Avatars" src="../../imgs/下载.jpg" />
                  <span style="font-weight: 500">Alipay</span>
                </div>
                <p style="color: #595959">
                  那是一种内在的东西，他们到达不了，也无法触及的
                </p>
                <div class="project-card-div">
                  <span style="font-size: 12px">科学搬砖组</span>
                  <span style="font-size: 12px; color: #bfbfbf">9小时前</span>
                </div>
              </a-card-grid>
              <a-card-grid class="project-card-grid">
                <div style="margin-bottom: 8px">
                  <a-avatar class="Avatars" src="../../imgs/下载.jpg" />
                  <span style="font-weight: 500">Alipay</span>
                </div>
                <p style="color: #595959">
                  那是一种内在的东西，他们到达不了，也无法触及的
                </p>
                <div class="project-card-div">
                  <span style="font-size: 12px">科学搬砖组</span>
                  <span style="font-size: 12px; color: #bfbfbf">9小时前</span>
                </div>
              </a-card-grid>
              <a-card-grid class="project-card-grid">
                <div style="margin-bottom: 8px">
                  <a-avatar class="Avatars" src="../../imgs/下载.jpg" />
                  <span style="font-weight: 500">Alipay</span>
                </div>
                <p style="color: #595959">
                  那是一种内在的东西，他们到达不了，也无法触及的
                </p>
                <div class="project-card-div">
                  <span style="font-size: 12px">科学搬砖组</span>
                  <span style="font-size: 12px; color: #bfbfbf">9小时前</span>
                </div>
              </a-card-grid>
              <a-card-grid class="project-card-grid">
                <div style="margin-bottom: 8px">
                  <a-avatar class="Avatars" src="../../imgs/下载.jpg" />
                  <span style="font-weight: 500">Alipay</span>
                </div>
                <p style="color: #595959">
                  那是一种内在的东西，他们到达不了，也无法触及的
                </p>
                <div class="project-card-div">
                  <span style="font-size: 12px">科学搬砖组</span>
                  <span style="font-size: 12px; color: #bfbfbf">9小时前</span>
                </div>
              </a-card-grid>
              <a-card-grid class="project-card-grid">
                <div style="margin-bottom: 8px">
                  <a-avatar class="Avatars" src="../../imgs/下载.jpg" />
                  <span style="font-weight: 500">Alipay</span>
                </div>
                <p style="color: #595959">
                  那是一种内在的东西，他们到达不了，也无法触及的
                </p>
                <div class="project-card-div">
                  <span style="font-size: 12px">科学搬砖组</span>
                  <span style="font-size: 12px; color: #bfbfbf">9小时前</span>
                </div>
              </a-card-grid>
              <a-card-grid class="project-card-grid">
                <div style="margin-bottom: 8px">
                  <a-avatar class="Avatars" src="../../imgs/下载.jpg" />
                  <span style="font-weight: 500">Alipay</span>
                </div>
                <p style="color: #595959">
                  那是一种内在的东西，他们到达不了，也无法触及的
                </p>
                <div class="project-card-div">
                  <span style="font-size: 12px">科学搬砖组</span>
                  <span style="font-size: 12px; color: #bfbfbf">9小时前</span>
                </div>
              </a-card-grid>
            </div>
          </a-card>

          <a-card :loading="loading" title="动态" :bordered="false">
            <a-list item-layout="horizontal" :data-source="data" :grid="{ gutter: 16, column: 2 }">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta
                    description="发布了一个新的公司动态"
                  >
                    <template #title>
                      <a href="https://www.antdv.com/">{{ item.title }}</a>
                    </template>
                    <template #avatar>
                      <a-avatar src="https://joeschmoe.io/api/v1/random" />
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>
        <a-col
          style="padding: 0 12px"
          :xl="8"
          :lg="24"
          :md="24"
          :sm="24"
          :xs="24"
        >
        
          <a-card
            title="个人指数"
            style="margin-bottom: 24px"
            :bordered="false"
            :body-style="{ padding: 0 }"
          >
            <div id="pieChart" style="min-height: 300px"></div>
          </a-card>
          <a-card :loading="loading" title="团队" :bordered="false">
            <div class="members">
              <a-row>
                <a-col :span="12" v-for="(item, index) in teams" :key="index">
                  <a>
                    <a-avatar size="small" :src="item.avatar" />
                    <span class="member">{{ item.name }}</span>
                  </a>
                </a-col>
              </a-row>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </page-header-wrapper>
</template>

<script>
import {
  Avatar,
  Card,
  CardGrid,
  Row,
  Col,
  Statistic,
  List,
  Button,
} from "ant-design-vue";
import { Pie } from "@antv/g2plot";

export default {
  name: "Dashboard",
  components: {
    [Avatar.name]: Avatar,
    [Card.name]: Card,
    [CardGrid.name]: CardGrid,
    [Row.name]: Row,
    [Col.name]: Col,
    [Statistic.name]: Statistic,
    [List.name]: List,
    [Button.name]: Button,
  },
  data() {
    return {
      name: "草莓熊",
      timeFix: "",
      welcomeMessage: "",
      loading: false,
      chartData: [
        { type: "生活", value: Math.floor(Math.random() * 100) },
        { type: "工作", value: Math.floor(Math.random() * 100) },
        { type: "业务", value: Math.floor(Math.random() * 100) },
        { type: "管理", value: Math.floor(Math.random() * 100) },
      ],
      teams: [
        {
          avatar:
            "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
          name: "赵六",
        },
        {
          avatar:
            "https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png",
          name: "孙七",
        },
        {
          avatar:
            "https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png",
          name: "周八",
        },
        {
          avatar:
            "https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png",
          name: "吴九",
        },
      ],
      data: [], // 初始化空数组
    };
  },

  mounted() {
    this.initPieChart();
    this.loadData(); // 加载数据
  },
  methods: {
    initPieChart() {
      const pie = new Pie("pieChart", {
        data: this.chartData,
        angleField: "value",
        colorField: "type",
        radius: 0.8,
        innerRadius: 0.5,
        label: {
          type: "spider",
          content: "{name} {percent}",
          style: {
            fill: "#fff",
          },
        },
        interactions: [
          {
            type: "element-active",
          },
        ],
      });
      pie.render();
    },

    loadData() {
    const items = Array.from({ length:  2}, (_, i) => ({
      title: `同事${i + 1}`,
      description: `这是项目${i + 1}的描述`,
      avatar: `https://joeschmoe.io/api/v1/random?${Date.now()}-${Math.random()}`, // 使用不同的头像URL
    }));
    this.data = items;
  },

    generateRandomTime() {
      const start = new Date(2023, 0, 1);
      const end = new Date();
      const diff = end.getTime() - start.getTime();
      const randomTimestamp = Math.random() * diff + start.getTime();
      return new Date(randomTimestamp).toLocaleString();
    },

    timeGreeting() {
      const now = new Date();
      const hour = now.getHours();
      let greeting;

      if (hour < 12) {
        greeting = "美好的一天才刚刚开始";
      } else if (hour < 18) {
        greeting = "忙碌的一天已过半";
      } else {
        greeting = "晚上夜深了";
      }

      return greeting;
    },

    getRandomWelcome() {
      const welcomeMessages = [
        "感到疲惫时也适当停下脚步",
        "适当放松会让工作事半功倍",
        "坐久了应该起来走走",
        "相信你可以的，祝你成功",
        "可以给自己一点时间",
      ];
      return welcomeMessages[
        Math.floor(Math.random() * welcomeMessages.length)
      ];
    },
  },
  created() {
    this.greeting = this.timeGreeting();
    this.welcomeMessage = this.getRandomWelcome();
  },
};
</script>

<style scoped>
.project-list {
  .card-title {
    font-size: 0;

    a {
      color: rgba(0, 0, 0, 0.85);
      margin-left: 12px;
      line-height: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: top;
      font-size: 14px;

      &:hover {
        color: #1890ff;
      }
    }
  }

  .card-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
  }

  .project-item {
    display: flex;
    margin-top: 8px;
    overflow: hidden;
    font-size: 12px;
    height: 20px;
    line-height: 20px;

    a {
      color: rgba(0, 0, 0, 0.45);
      display: inline-block;
      flex: 1 1 0;

      &:hover {
        color: #1890ff;
      }
    }

    .datetime {
      color: rgba(0, 0, 0, 0.25);
      flex: 0 0 auto;
      float: right;
    }
  }

  .ant-card-meta-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
  }
}

.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;

  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.members {
  a {
    display: block;
    margin: 12px 0;
    line-height: 24px;
    height: 24px;

    .member {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      line-height: 24px;
      max-width: 100px;
      vertical-align: top;
      margin-left: 12px;
      transition: all 0.3s;
      display: inline-block;
    }

    &:hover {
      span {
        color: #1890ff;
      }
    }
  }
}

.project-card-grid {
  /* display: grid; */
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  grid-auto-rows: minmax(100px, auto);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
}

.project-card-grid[data-v-862569a9] {
  padding: 18px;
  width: auto;
  height: 148px;
}

/* 这是我的代码 */
.Avatars {
  width: 25px;
  height: 25px;
  margin: 0;
}

.project-card-div {
  display: flex;
  justify-content: space-between;
}

.content-title {
  width: fit-content;
  height: auto;
}

.avatar {
  width: 100px;
  height: 100px;
  margin: 0;
  margin-right: 20px;
  /* 添加右侧外边距以分隔元素 */
  margin-top: 10px;
  margin-left: 10px;
}

.myAvatar {
  width: 100px;
  height: 100px;
  margin: 0;
}

.welcome {
  font-size: 30px;
  width: fit-content;
  height: auto;
  margin-top: 10px;
}

.page-header-content {
  display: flex;
  /* 启用Flexbox布局 */
  align-items: center;
  /* 垂直居中对齐 */
}

.content {
  display: flex;
  flex-direction: column;
  /* 内部元素垂直排列 */
}

.department {
  margin-top: -10px;
}

.allProject {
  margin-left: 24px;
}


</style>
